<template>
	<view :class="['c-model', showBg ? '' : position]" :style="[{ zIndex: zIndex }, mStyle]" @touchmove.stop.prevent
		v-if="isShow">
		<view :class="['c-model-bg ', animation ? 'showBg' : 'hideBg']"
			:style="[{ transition: 'all ' + duration + 'ms' }, bgStyle]" @touchmove.stop.prevent v-if="showBg && isShow"
			@tap.stop="handleMaskHide"></view>
		<!-- content -->
		<view :class="['c-model-content', position, animation ? 'show' + position : 'hide' + position]"
			:style="[{ transition: 'all ' + duration + 'ms' }, cStyle]" :change:prop="touch.propObserver" :prop="touchProp"
			@transitionend="endhide" @mousedown="touch.touchstart" @mousemove="touch.touchmove" @mouseup="touch.touchend"
			@touchmove="touch.touchmove" @touchstart="touch.touchstart" @touchend="touch.touchend">
			<!-- 			 -->
			<view class="close" v-if="closeBtn" @tap.stop="hideModal"></view>
			<slot />
			<view class="safe-area-inset-bottom" v-if="position != 'center' && position != 'top'"></view>
		</view>
	</view>
</template>
<wxs module="touch" src="./touch.wxs"></wxs>
<script>
	/**
	 * popup
	 * @description
	 * @property {String} width 弹窗宽度   position为top和bottom无效
	 * @property {Boolean} value 控制显示 使用 v-model
	 * @property {Boolean} mask 背景
	 * @property {Boolean} closeBtn 是否显示关闭图标
	 * @property {String} position 弹出方向 showBg
	 * @property {Boolean} mask 背景
	 * @property {Boolean} showBg 是否显示背景 不需要背景时 position:left/right请设置固定宽度（不支持百分比）  center不支持无背景
	 * @property {String} padding 内容区内边距
	 * @property {Object} contentStyle 内容区自定义样式
	 * @property {Object}  modalStyle 弹出外层盒子样式
	 * @property {Number String}  zIndex 弹窗层级
	 * @property {Number}  duration 过度时间
	 * @property {String}  round 圆角
	 * @property {Boolean} canSlide 是否允许弹窗滑动
	 **/
	export default {
		data() {
			return {
				animation: false,
				isShow: false,
				panStyle: null,
			}
		},
		props: {
			width: {
				type: String,
				default: '70%',
			},
			// 双向绑定value
			value: {
				type: Boolean,
				default: false,
			},
			mask: {
				type: Boolean,
				default: true,
			},
			closeBtn: {
				type: Boolean,
				default: false,
			},
			position: {
				type: String,
				default: 'center', // right left top bottom center
			},
			showBg: {
				type: Boolean,
				default: true, //不需要背景时 position:left/right请设置固定宽度  center不支持无背景
			},
			bgStyle: {
				type: Object,
				default: () => {},
			},
			padding: {
				type: String,
				default: '0',
			},
			contentStyle: {
				type: Object,
				default () {
					return {}
				},
			},
			modalStyle: {
				type: Object,
				default () {
					return {}
				},
			},
			zIndex: {
				type: [String, Number],
				default: 10000,
			},
			duration: {
				type: Number,
				default: 300,
			},
			round: {
				type: String,
				default: '0',
			},
			canSlide: {
				type: Boolean,
				default: true,
			},
			ejectMode: {
				// 弹窗弹起是 用setTimeout还是 $nextTick
				type: String,
				default: 'setTimeout',
			},
		},
		computed: {
			mStyle() {
				let style = this.modalStyle
				return style
			},
			cStyle() {
				let style = { ...this.contentStyle, ...this.panStyle }
				let position = this.position
				let r = this.round
				if (position === 'top' || position === 'bottom') {
					style.width = '100%'
				} else {
					style.width = this.width
				}
				if (r !== '0') {
					if (this.position == 'center') r = [r, r, r, r]
					else if (this.position == 'bottom') r = [r, r, 0, 0]
					else if (this.position == 'left') r = [0, r, r, 0]
					else if (this.position == 'right') r = [r, 0, 0, r]
					else r = [0, 0, r, r]
					style.borderRadius = `${r.join(' ')}`
				}
				style.padding = this.padding
				return style
			},
			touchProp() {
				console.log('弹窗方向变化', this.position)
				return { position: this.position, canSlide: this.canSlide, duration: this.duration }
			},
		},
		watch: {
			value: {
				immediate: true,
				handler(val) {
					if (val === this.isShow) return
					if (val) {
						this.showModal()
					} else {
						this.hideModal() //直接关闭
					}
				},
			},
			isShow(val) {
				this.$emit('input', val)
			},
		},
		methods: {
			showModal() {
				this.isShow = true
				if (this.ejectMode === 'setTimeout') {
					// 此方法连续点击在小程序中会导致弹窗弹起缓慢 uView使用此方法 看个人抉择
					this.startTimer(() => {
						this.animation = true
						// 动画结束事件推送
						this.startTimer(() => {
							this.$emit('showed', this.value)
						})
					}, 50)
				} else {
					// 使用此方法有时候动画会出不来
					this.$nextTick(() => {
						this.animation = true
						// 动画结束事件推送
						this.startTimer(() => {
							this.$emit('showed', this.value)
						}, this.duration)
					})
				}
			},

			hideModal() {
				this.animation = false
				// 关闭销毁弹窗
				// 定时器关闭动画 目前使用@transitionend关闭 如果过度时间为0 不会触发@transitionend 需要使用定时器关闭
				if (this.duration === 0) {
					this.startTimer(() => {
						this.isShow = false
						this.$emit('closed', {
							detail: 'closed',
						})
					})
				}
			},

			// 定时器
			startTimer(callback, time) {
				if (this.timer) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					callback && callback()
				}, time || this.duration)
			},

			// 过度完成
			// @transitionend="endhide"
			endhide() {
				// console.log('过度完成',this.value,this.animation)
				if (!this.animation) {
					this.isShow = false
					this.$emit('closed', {
						detail: 'closed',
					})
				}
			},

			//点击背景关闭
			handleMaskHide() {
				if (this.mask) this.hideModal()
				this.$emit('mask')
			},
		},
	}
</script>
<style>
	/* components/c-model/c-model.wxss */
	.c-model {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10000;
		width: 100%;
	}

	.c-model.left {
		width: 0;
		right: auto;
	}

	.c-model.top {
		height: 0;
		bottom: auto;
	}

	.c-model.bottom {
		height: 0;
		top: auto;
	}

	.c-model.right {
		width: 0;
		left: auto;
	}

	.c-model-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.6);
		transition: opacity 0.5s;
	}

	.c-model-bg.bg_transparent {
		background-color: transparent;
	}

	.close {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 10px;
		top: 10rpx;
		z-index: 999;
	}

	.close::before,
	.close::after {
		content: '';
		display: inline-block;
		width: 30rpx;
		height: 2rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: #333333;
	}

	.close::after {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.close::before {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.c-model-content {
		background-color: #fff;
		z-index: 101;
		overflow: hidden;
		padding: 20rpx;
		/* transition: all 0.3s; */
		box-sizing: border-box;
	}

	.c-model-content.center {
		width: 80%;
		border-radius: 10rpx;
		transform: scale(1.1);
		-webkit-transform: translate3d(0, 0, -1px);
	}

	.center.showcenter {
		transform: scale(1);
		opacity: 1;
		-webkit-transform: translate3d(0, 0, -1px);
	}

	.center.hidecenter {
		transform: scale(1.1);
		opacity: 0;
	}

	.c-model-content.left {
		position: absolute;
		left: 0;
		top: 0;
		width: 40%;
		height: 100%;
		background-color: #fff;
		transition: all 0.5s;
		transform: translateX(-110%);
		border-radius: 0 10rpx 10rpx 0;
	}

	.left.showleft {
		transform: translateX(0);
	}

	.left.hideleft {
		transform: translateX(-110%) !important;
	}

	.c-model-content.right {
		position: absolute;
		right: 0;
		top: 0;
		width: 40%;
		height: 100%;
		background-color: #fff;
		transition: all 0.5s;
		transform: translateX(110%);
		border-radius: 10rpx 0 0 10rpx;
	}

	.right.showright {
		transform: translateX(0);
	}

	.right.hideright {
		transform: translateX(110%) !important;
	}

	.c-model-content.top {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #fff;
		transition: all 0.5s;
		transform: translateY(-110%);
		border-radius: 0;
	}

	.top.showtop {
		transform: translateY(0);
	}

	.top.hidetop {
		transform: translateY(-110%) !important;
	}

	.c-model-content.bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		transition: all 0.5s;
		transform: translateY(110%);
		border-radius: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bottom.showbottom {
		transform: translateY(0);
	}

	.bottom.hidebottom {
		transform: translateY(110%) !important;
	}

	/* 背景 */
	.showBg {
		opacity: 1;
	}

	.hideBg {
		opacity: 0;
	}
</style>